<template>
  <div class="market">
    <div class="top-row">
      <div class="name">期末实有市场主体</div>
      <div class="value-wrapper">
        <span>100</span>
        <span>万户</span>
      </div>
      <div class="rightbox">
        <div class="box" :class="[checkSigns(8.8)]"></div>
        <div class="rate" :class="[checkSign(8.8)]">8.8%</div>
      </div>
    </div>
    <div class="select">
      <el-select v-model="currentOpt" :popper-append-to-body="false" @change="selectChange">
        <el-option v-for="(value, index) in selectOptions" :key="index" :label="value" :value="value"></el-option>
      </el-select>
    </div>
    <div class="prechart">
      <div class="mychart">
        <div class="my-element">
        </div>
        <div class="chart_bg"></div>
        <div class="UseWaterBtm" ref="myChart"></div>
      </div>
      <div class="rightlegend">
        <div class="legendlitem" v-for="(item, index) in chartData" :key="index">
          <div class="legendname">
            <div class="lefticon" :style="'background:' + colorList[index] + ';'"></div>
            <div class="legendnametext">{{ item.name }}</div>
          </div>
          <div class="legendpercent">
            <span><b>{{ item.num }}</b>&nbsp;户</span>
            <div class="rightbox">
              <div class="box" :class="[checkSigns(8.8)]"></div>
              <div class="rate" :class="[checkSign(8.8)]">8.8%</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data () {
    return {
      currentOpt: '按销售单位所在地分',
      selectOptions: ['按销售单位所在地分', '按销售形态分', '按限额分'],
      myChart: null,
      chartData: [
        { id: 1, name: '城镇', num: 44442, zb: 4.3 },
        { id: 2, name: '乡村', num: 1536, zb: 7.3 }
      ],
      colorList: [
        '#9CFBC5',
        '#F5BA5E',
        '#90D7F5',
        '#1983FF',
        '#8BCE1D',
        '#D170FF',
        '#F46D4F',
        '#FA9A09',
        '#FF317B',
        '#444444',
        '#BDBDBD',
        '#D01505',
        '#D5D5D5',
        '#D70303'
      ]
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    checkSigns (numStr) {
      const num = parseFloat(numStr)
      return num >= 0 ? 'red' : 'green'
    },
    checkSign (numStr) {
      const num = parseFloat(numStr)
      return num >= 0 ? 'pos' : 'neg'
    },
    getData () {
      this.initChart()
    },
    initChart () {
      if (!this.myChart) {
        this.myChart = echarts.init(this.$refs.myChart)
      }
      const chartData = []
      this.chartData.forEach((item) => {
        chartData.push({
          name: item.name,
          value: item.num
        })
      })
      const option = {
        color: this.colorList,
        tooltip: {
          trigger: 'item'
        },
        grid: {
          left: '10%',
          right: '0%',
          bottom: '10%',
          top: '20%',
          containLabel: true
        },
        // backgroundColor: rgba(1, 61, 128, 1),
        series: [
          {
            name: '',
            type: 'pie',
            radius: ['82%', '91%'],
            itemStyle: {
              borderColor: '#132e51',
              borderWidth: 2
            },
            label: {
              show: false
            },
            data: chartData
          }
        ]
      }
      this.myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.rightbox {
  display: flex;

  .box {
    width: 10px;
    height: 16px;
    margin-right: 5px;
    margin-top: 3px;

    &.red {
      background: url('../right/img/bgc.png')no-repeat center center;
      background-size: 100% 100%;
    }

    &.green {
      background: url('../right/img/bgc1.png')no-repeat center center;
      background-size: 100% 100%;
    }
  }

  .rate {
    display: flex;
    align-items: center;
    font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
    font-weight: bold;
    font-size: 16px;

    &.pos {
      color: #FE3D3D;
    }

    &.neg {
      color: #03f842;
    }

  }
}


.top-row {
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 49px;
  background: url("./img/row-bg.png") no-repeat;
  background-size: 100% 100%;
  margin-bottom: 10px;

  .name {
    font-family: MicrosoftYaHeiUI;
    font-size: 16px;
    color: #ffffff;
  }

  .value-wrapper {
    display: flex;
    align-items: center;

    span:first-child {
      margin-right: 4px;
      font-family: YouSheBiaoTiHei;
      font-size: 24px;
      color: #18fcf4;
      line-height: 1.5;
    }

    span:last-child {
      font-family: MicrosoftYaHeiUI;
      font-size: 14px;
      color: #ffffff;
    }
  }


}

.prechart {
  width: 100%;
  height: 150px;
  padding: 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;


  .mychart {
    width: 142px;
    height: 142px;

    .UseWaterBtm {
      width: 130px;
      height: 130px;
    }

    .my-element {
      width: 132px;
      height: 132px;
      background: url('./img/8.png') no-repeat center center;
      background-size: 100% 100%;
      position: absolute;
      left: 10px;
      top: 4px;
      animation: rotate 12s linear infinite;
    }

    .chart_bg {
      width: 45px;
      height: 41px;
      background: url('./img/16.png') no-repeat center center;
      background-size: 100% 100%;
      position: absolute;
      left: 52px;
      top: 55px;
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }
  }

  .rightlegend {
    width: 255px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .legendlitem {
      width: 100%;
      height: 38px;
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      position: relative;

      .legendname {
        width: 85px;
        height: 28px;
        display: flex;
        align-items: center;
        font-family: "Microsoft YaHei";
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;

        .lefticon {
          width: 4px;
          height: 10px;
          border-radius: 5px;
          margin-right: 10px;
        }
      }

      .legendpercent {
        width: 240px;
        height: 28px;
        background: #1d4276;
        border-radius: 6px;
        margin-left: 5px;
        font-family: "Microsoft YaHei";
        font-size: 18px;
        color: #ffffff;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 5px;

        span {
          width: 65%;
          text-align: center;
          font-family: MicrosoftYaHeiUI, MicrosoftYaHeiUI;
          font-size: 18px;
          font-style: normal;
          text-transform: none;

          &:last-child {
            width: 35%;
          }

          &.percent {
            color: #ff3e3e;
            padding-left: 10px;
            font-size: 18px;
            font-weight: bold;
            box-sizing: border-box;
            position: relative;

            &::before {
              content: "";
              width: 8px;
              height: 12px;
              // background: url("../images/up-arrow.png") no-repeat;
              // background-size: 100% 100%;
              position: absolute;
              left: 0;
              top: 50%;
              margin-top: -5px;
            }
          }

          b {
            font-weight: normal;
            color: #ffde00;
            font-size: 22px;
          }
        }
      }
    }
  }
}

::v-deep .el-select {
  width: 100%;

  .el-input {
    input {
      width: 100%;
      height: 20px;
      font-size: 12px;
      padding-right: 8px;
      color: #fff;
      background: transparent;

      //   font-family: Source Han Sans CN;
      //   color: hsla(222, 72%, 72%, 1);
      border: 1px solid #3e8bf2;
      //   background: rgba(255, 255, 255, 1);
      //   border-radius: 12px;
      position: relative;
    }
  }

  .el-input__suffix {
    height: auto;
    right: 5px;
    top: -8px;
  }

  .el-select-dropdown {
    // border-color: rgba(255, 255, 255, 0.4);
    border: none;
    background-color: #4e83d1;
    border-radius: 4px;
    // width: 100px;
    position: absolute !important;
    left: 0 !important;

    .el-select-dropdown__item {
      height: 20px;
      line-height: 20px;
      font-size: 12px;
      color: white;
    }

    .el-select-dropdown__item.selected,
    .el-select-dropdown__item:hover {
      color: rgba(5, 70, 152, 0.6);
      background: rgba(0, 255, 255, 1);
    }

    .hover {
      background-color: transparent;
    }
  }

  .el-icon-arrow-up:before {
    content: '\e78f';
    color: #3e8bf2;
    font-size: 14px;
  }
}
</style>
